<template>
	<view class="article">
		<view class="article-title">{{title}}</view>
		<uni-list :border="false">
			<uni-list-item>
				<!-- 通过body插槽定义作者信息内容 -->
				<view slot="body" class="header-content">
					<view class="uni-title">{{news.newsCategoryName}}</view>
					<view class="uni-note">
						<text>{{news.isReprint? '转载' : '原创'}}</text>
						<text>更新于：{{news.creationTime | formatDate}}</text>
						<text>阅读：{{news.hits}}</text> 
					</view>
				</view>
				<view slot="footer" class="footer">
					<button open-type="share" class="footer-button">转发</button>
				</view>
			</uni-list-item>
		</uni-list>
		<view class="banner" v-if="news.imageUrl">
			<!-- 文章开头，缩略图 -->
			<image class="banner-img" :src="news.imageUrl | absUrl" mode="widthFix"></image>
			<!-- 文章摘要 -->
			<view class="banner-title">
				<text class="uni-ellipsis">{{news.short}}</text>
			</view>
		</view>
		<!-- 新闻详情：使用 uParse 解析富文本 -->
		<view class="article-content">
			<u-parse :content="news.content" noData="暂无数据"></u-parse>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				title:'',
				id: 0,
				news:{}
			};
		},
		methods:{
			loadData() {
				uni.showLoading({
					title:'加载中...'
				});
				this.$http.get("/api/services/app/News/Get?id=" + this.id)
				.then(res=>{
					this.news = res.data.result;
					this.title = this.news.title
					uni.setNavigationBarTitle({
						title:this.title
					})
					uni.hideLoading();
				});
			}
		},
		onLoad(event) {
			//获取真实新闻id，通常 id 来自上一个页面
			if(event.id){
				this.id = event.id
			}
			//若上一页传递了标题过来，则设置导航栏标题
			if(event.title){
				this.title = event.title
				uni.setNavigationBarTitle({
					title:event.title
				})
			}
			this.loadData();
			this.$http.post("/api/services/app/News/AddHits",{id: this.id});
		},
		onShareAppMessage() {
			return {
				title: this.news.title,
				path: "/pages/news/news-detail?id=" + this.id
			}
		},
		onShareTimeline() {
			return {
				title: this.news.title,
				query: {
					id: this.id
				}
			}
		}
	}
</script>

<style lang="scss">
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;
		text{
			margin-right: $uni-spacing-row-base;
		}
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: $uni-color-primary;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 15px;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-title {
		padding: 20px 15px;
		padding-bottom: 0;
	}

	.article-content {
		padding: 15px;
		font-size: 15px;
		overflow: hidden;
	}
</style>
